<template>
  <div id="ad">

    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>

    </el-breadcrumb>
    <div id="start">

<!--
      <vue-core-video-player class="video-player vjs-custom-skin"

   ref="videoPlayer" controls='auto' :options="playerOptions" muted="muted">



      </vue-core-video-player> -->
      <video-player class="video-player vjs-custom-skin" ref="videoPlayer" controls='auto'
        muted="muted" :options="playerOptions">

      </video-player>
    </div>
    <span>热评</span>
    <hr />
    <el-form>
      <el-row>
        <el-input class="el-in" placeholder="老夫掐指一算你就是神评" v-model="Comment">
          <el-button slot="append" icon="el-icon-success" @click="submitInfo"></el-button>
        </el-input>
      </el-row>
    </el-form>
    <el-table :data="info" class="info">
      <el-table-column prop="username" label="昵称" width="180">
      </el-table-column>
      <el-table-column prop="total" label="内容" width="180">
      </el-table-column>
      <el-table-column prop="num" label="点赞数" width="180">
      </el-table-column>
      <el-table-column prop="createtime" label="评论时间" width="180">
      </el-table-column>
      <el-table-column prop="status" label="点赞">
        <template slot-scope="sc">
          <el-switch v-model="sc.row.status" active-color="#13ce66" inactive-color="#ff4949"
            @change="updatestate(sc.row)">
          </el-switch>
        </template>

      </el-table-column>
    </el-table>
    <el-card>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryItemInfo.pageNum" :page-sizes="[1, 5, 10, 20]" :page-size="queryItemInfo.pageSize"
        layout="prev, pager, next" :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        playerOptions: {

          playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度

          autoplay: false, // 如果为true,浏览器准备好时开始回放。

          muted: false, // 默认情况下将会消除任何音频。

          loop: false, // 是否视频一结束就重新开始。

          preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）

          language: 'zh-CN',

          aspectRatio: '4:3', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）

          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。

          sources: [{

            type: "video/mp4", // 类型

            src: ' ' // url地址

          }],

          poster: '', // 封面地址

          notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。

          controlBar: {

            timeDivider: true, // 当前时间和持续时间的分隔符

            durationDisplay: true, // 显示持续时间

            remainingTimeDisplay: true, // 是否显示剩余时间功能

            fullscreenToggle: true // 是否显示全屏按钮

          }

        },
        queryItemInfo: {
          query: '',
          pageNum: 1,
          pageSize: 6
        },
        total: 0,

        viewaddr: '',
        Comment: '',
        info: []
      }
    },
    methods: {
      async updatestate(status) {
        console.log(status)
        if (status.status == true) {
          status.num++
        }
        if (status.status == false && status.num > 0) {
          status.num--
        }

        const result = await this.$http.put("nono/view/comment/changestatus", status, {
          headers: {
            "Authorization": "Bearer " +
              localStorage.getItem("accessToken")
          }
        })
        if (result.data.status == 200) {
          return this.$message.success("执行成功")
        } else {
          return this.$message.error("执行失败")
        }
      },
      geturl() {
        let viewaddr = localStorage.getItem("viewaddr")

        this.playerOptions['sources'][0]['src'] = viewaddr;
        console.log(viewaddr)
      },
      async getInfo() {
        let viewid = localStorage.getItem("viewid")
        this.queryItemInfo.query = viewid
        // console.log(viewid)params: this.queryItemInfo
        const result = await this.$http.get("nono/view/comment/getCommentInfo", {
          headers: {
            "Authorization": "Bearer " +
              localStorage.getItem("accessToken")
          },
          params: this.queryItemInfo
        })
        this.info = result.data.rows
        this.total = result.data.total
        console.log(result.data)
      },
      /* 提交评论*/
      async submitInfo() {
        let result = await this.$http.post("nono/view/comment/insertInfo", {
          "viewid": this.queryItemInfo.query,
          "total": this.Comment
        }, {
          headers: {
            "Authorization": "Bearer " +
              localStorage.getItem("accessToken")
          }
        })
        if (result.data.status == 200) {
          this.$message.success("评论成功")
        } else {
          return this.$message.error("抱歉,服务器繁忙请稍后再试")
        }
        

      },
      handleSizeChange(size) {
        this.queryItemInfo.pageSize = size
        this.getInfo()
      },
      handleCurrentChange(current) {

        this.queryItemInfo.pageNum = current
        this.getInfo()
      },
    },
    mounted() {
      this.getInfo()
      this.geturl()
    }
  }
</script>

<style>
  .info {
    width: 500px;
    margin: auto;
  }

  .el-breadcrumb {
    height: 30px;
    font-size: 50px;
  }

  #start {
    margin: auto;
    width: 700px;
    height: 600px;

  }

  #ad {
    height: 100%;
    background-image: url(../assets/images/CSDN浏览器助手_壁纸_1628923576026.png)
  }
</style>
